<template>
	<div>
<!--    查询条件-->
    <el-card style="margin-bottom: 10px">
      <template #header>
        <span>查询条件</span>
      </template>
      <el-form label-width="auto">
        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item label="公告类型">
              <el-select v-model="announcementForm.announcementType">
                <el-option value="1" label="维护公告" />
                <el-option value="2" label="更新公告" />
                <el-option value="3" label="紧急通知" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公告标题">
              <el-input placeholder="请输入" v-model="announcementForm.announcementTitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="display: flex;justify-content: right">
            <el-form-item label="发布时间">
              <el-date-picker
                  v-model="announcementForm.publishDate"
                  style="width: 300px"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item label="发布者">
              <el-input v-model="announcementForm.publishMember" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="announcementForm.status">
                <el-option value="1" label="已发布" />
                <el-option value="0" label="未发布" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button icon="el-icon-search" type="primary" size="small" @click="Query(1)">查询</el-button>
            <el-button icon="el-icon-delete" type="primary" size="small" @click="Reset()">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <template #header>
        <div style="display: flex;justify-content: space-between;align-items: center">
          <span>查询结果</span>
          <div>
            <!-- <el-button icon="el-icon-plus" type="primary" size="small" @click="addAnnouncement()">发布新公告</el-button> -->
          </div>
        </div>
      </template>
      <el-table border style="margin-bottom: 10px" :data="resTable">
        <el-table-column prop="_id" align="center" label="公告ID"></el-table-column>
        <el-table-column prop="announcementType" align="center" label="公告类型">
          <template slot-scope="scope">
            <span v-if="scope.row.announcementType==='1'">维护公告</span>
            <span v-if="scope.row.announcementType==='2'">更新公告</span>
            <span v-if="scope.row.announcementType==='3'">紧急通知</span>
          </template>
        </el-table-column>
        <el-table-column prop="announcementTitle" align="center" label="公告标题"></el-table-column>
        <el-table-column align="center" label="发布时间">
          <template slot-scope="scope">
            {{ scope.row.publishDate }} {{ scope.row.publishTime }}
          </template>
        </el-table-column>
        <el-table-column prop="publishMember" align="center" label="发布者"></el-table-column>
        <el-table-column prop="status" align="center" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==='0'"><span style="color: orange">未审核</span></span>
            <span v-if="scope.row.status==='1'"><span style="color: #00b42a">审核通过</span></span>
            <span v-if="scope.row.status==='2'"><span style="color: #e72f2f">审核不通过</span></span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注"></el-table-column>
        <el-table-column width="300" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="openDialog1(scope.row)">详情</el-button>
            <el-button v-if="scope.row.status==='0'" type="primary" size="small" @click="openDialog(scope.row)">审核</el-button>
            <el-button type="danger" size="small" @click="Delete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: right">
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog :visible.sync="dialog" title="审核公告">
      <el-form label-width="auto">
        <el-form-item label="审核状态">
          <el-select v-model="announcementForm1.status">
            <el-option value="0" label="待审核" />
            <el-option value="1" label="通过" />
            <el-option value="2" label="不通过" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="announcementForm1.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="Update()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialog1" title="详情">
      <el-form label-width="auto">
        <el-form-item label="公告标题">
          <el-input v-model="announcementForm2.announcementTitle" disabled></el-input>
        </el-form-item>
        <el-form-item label="公告类型">
          <el-select v-model="announcementForm2.announcementType" disabled>
            <el-option value="1" label="维护公告" />
            <el-option value="2" label="更新公告" />
            <el-option value="3" label="紧急通知" />
          </el-select>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input type="textarea" v-model="announcementForm2.content" disabled></el-input>
        </el-form-item>
        <el-form-item label="发布者">
          <el-input v-model="announcementForm2.publishMember" disabled></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-input v-model="DetailsDateTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select v-model="announcementForm2.status" disabled>
            <el-option value="0" label="待审核" />
            <el-option value="1" label="通过" />
            <el-option value="2" label="不通过" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="announcementForm2.remark" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>
<script>
  import router from "@/router";
  export default {
    name:'AnnouncementManage',
    data(){
      return{
        dialog:false,
        dialog1:false,
        total:0,
        announcementForm2:{
          _id:"",
          announcementType:"",
          announcementTitle:"",
          publishMember:"",
          publishDate:"",
          publishTime:"",
          status:"",
          remark:"",
          content:""
        },
        announcementForm1:{
          _id:"",
          announcementType:"",
          announcementTitle:"",
          publishMember:"",
          publishDate:"",
          publishTime:"",
          status:"",
          remark:"",
          content:""
        },
        announcementForm:{
          announcementType:"",
          announcementTitle:"",
          publishMember:"",
          publishDate:"",
          publishTime:"",
          status:"",
          pageNo:1,
        },
        resTable:[],
      }
    },
    computed:{
      EditDateTime:{
        get(){
          return `${this.announcementForm1.publishDate} ${this.announcementForm1.publishTime}`
        }
      },
      DetailsDateTime:{
        get(){
          return `${this.announcementForm2.publishDate} ${this.announcementForm2.publishTime}`
        }
      }
    },
    methods:{
      // 查询
      async Query(pageNo){
        this.announcementForm.pageNo = pageNo;
        const res = await this.$axios({
          url:"/api/queryannouncement",
          method:"post",
          data:this.announcementForm
        });
        if(res && res.status===200){
          this.resTable = [];
          this.total = res.data.pager.Total;
          for(let i=0;i<res.data.data.length;i++){
            this.resTable.push(JSON.parse(res.data.data[i]));
          }
        }
      },
      // 删除
      async Delete(_id){
        const res = await this.$axios({
          url:"/api/deleteannouncement",
          method:"post",
          data:{_id}
        })
        this.Query(1);
      },
      // 编辑
      async Update(){
        const res = await this.$axios({
          url:"/api/updateannouncement",
          method:"post",
          data:this.announcementForm1
        });
        if(res.status === 200){
          if(res.data.status === 1){
            this.$message({
              showClose: true,
              message: '审核成功',
              type: "success",
            });
            this.dialog = false;
            this.Query(1);
          }else {
            this.$message({
              showClose: true,
              message: '审核失败',
              type: "error",
            });
          }
        }else{
          this.$message({
            showClose: true,
            message: '审核失败',
            type: "error",
          });
        }
      },
      // 打开详情弹窗
      openDialog1(item){
        this.announcementForm2 = {
          _id:item._id,
          announcementType:item.announcementType,
          announcementTitle:item.announcementTitle,
          publishMember:item.publishMember,
          publishDate:item.publishDate,
          publishTime:item.publishTime,
          status:item.status,
          remark:item.remark,
          content:item.content,
        };
        this.dialog1 = true;
      },
      // 打开编辑弹窗
      openDialog(item){
        this.announcementForm1 = {
          _id:item._id,
          announcementType:item.announcementType,
          announcementTitle:item.announcementTitle,
          publishMember:item.publishMember,
          publishDate:item.publishDate,
          publishTime:item.publishTime,
          status:item.status,
          remark:item.remark,
          content:item.content,
        };
        this.dialog = true;
      },
      // 换页号
      handleCurrentChange(val){
        this.Query(val);
      },
      // 重置
      Reset(){
        this.announcementForm = {
          type:"",
          title:"",
          publishMember:"",
          publishTime:"",
          status:"",
          pageNo:1,
        };
      },
      // 发布公告
      addAnnouncement(){
        router.push({name: "addannouncement"});
      }
    },
    mounted() {
      this.Query(1);
    }
  }
</script>

<style scoped>
  .el-input{
    width: 400px;
  }
  .el-select{
    width: 400px;
  }
</style>